feat(ui5-dynamic-date-range): introduce From/To (Date & Time) option #12341
Conversation
|
🚀 Preview deployment ready: https://UI5.github.io/webcomponents/pr-12341/ The preview will be updated automatically when you push new commits to this PR. |
|
🚀 Deployed on https://pr-12341--ui5-webcomponents-preview.netlify.app |
| }; | ||
|
|
||
| const dateTimeRangeOptionToDates = (value: DynamicDateRangeValue): Array<Date> => { | ||
| const startDate = value.values ? value.values[0] as Date : UI5Date.getInstance(); |
There was a problem hiding this comment.
Minor:
It took me a while to understand what does this actually do.
We can adjust it a little for readibility, like e.g. (havent tested it, just suggestion)
const [firstValue, secondValue] = value.values || [];
const currenDate = UI5Date.getInstance();
const startDate = firstValue instanceof Date ? firstValue : currentDate;
const endDate = secondValue instanceof Date ? secondValue : currentDate;
return [startDate, endDate];
};There was a problem hiding this comment.
Imo both approaches read very similar to me, and considering all other toDates methods are formulated the same way, I'm leaving it as-is for now. If @tsanislavgatev has a strong preference for your suggestion, I can change it then.
| const startDate = this._parseDate(splitValue[0].trim()) as Date; | ||
| const endDate = this._parseDate(splitValue[1].trim()) as Date; | ||
|
|
||
| const returnValue = { operator: "", values: [] } as DynamicDateRangeValue; |
There was a problem hiding this comment.
move the definition to the start, add this operator, return this and use the same object
| if (this.value?.operator === currentOperator && this.value.values && this.value.values.length === 2) { | ||
| return this.getOption(this.value.operator)?.format(this.value)?.split("-")[1].trim(); | ||
| } |
There was a problem hiding this comment.
this can be extracted in function that gets the array, you have it twice just with different element from the. array
| } from "../generated/i18n/i18n-defaults.js"; | ||
|
|
||
| export default function DateTimeRangeTemplate(this: DynamicDateRange) { | ||
| const currentOperator = "DATETIMERANGE"; |
There was a problem hiding this comment.
current but hardcoded?
| return [startDate, endDate]; | ||
| }; | ||
|
|
||
| const dateTimeRangeOptionToDates = (value: DynamicDateRangeValue): Array<Date> => { |
There was a problem hiding this comment.
what if this method is called with values: [] ?
There was a problem hiding this comment.
value.values ? value.values[0] as Date : UI5Date.getInstance(); -> It just sets the date to today's date, the same way in the Date and DateRange options' toDates methods
5 participants
With this PR we introduce a new "From/To (Date & Time)" option for the
ui5-dynamic-date-range, allowing users to select a range of dates with times.Example:
Usage:
To add the option to your DynamicDateRange, add
DATETIMERANGEin theoptionsattribute as follows:Related to: #12182